<template>
    <div>
        <!-- 中部盒子 -->
        <div class="zhongbu">
            <div class="zhongbua">
                <span><svg data-v-7cdac22a="" viewBox="64 64 896 896" data-icon="home" width="1em" height="1em"
                           fill="currentColor" aria-hidden="true" focusable="false" class="">
                        <path
                                d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z">
                        </path>
                    </svg>首页</span>
                <span>&nbsp;&nbsp;/&nbsp;&nbsp; </span>
                <span>课程搜索</span>
            </div>
            <div class="zhongbub">
                <img :src="data.bannerFileUrl" alt="">
                <div class="zhongbub2">
                    <span class="span1">{{data.courseTitle}}</span><br>
                    <span class="span2">
                    逐步27人学习<a-rate :default-value="5" disabled style="margin-left: 5px"/>
                 </span><br>
                    <span class="span3">￥{{data.coursePrice}}</span><span
                        class="span4">￥{{data.discountPrice}}</span><br>
                    <span class="span5">{{data.discountDesc}}</span><br>
                    <div v-if="data.isFree==1" style="display: inline-block">
                        <input type="button" value="立即观看" class="b1">
                    </div>
                    <div v-if="data.isFree==0" style="display: inline-block">
                        <input type="button" value="加入购物车" class="b1 " @click="shoppingCart(data.courseId)"
                               style="outline: none">
                    </div>
                </div>
                <div class="zhongbub3">
                    <!--                    收藏中心-->
                    <a-button type="primary" @click="openMessage">
                        <img src="../../../assets/images/爱心.png" alt="">
                        收藏
                    </a-button>
                </div>
            </div>
            <!-- tab切换-->
            <div class="container">
                <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="课程描述" style="padding: 30px;">
                        <p v-html="data.courseDetail"></p>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="目录" force-render style="padding: 30px;">
                        <div class="biglist">
                            <div v-for="(item,index) in data.sections" :key="index+1" class="innerlist">
                                <h3>
                                    <div>
                                        <span style="margin-left: 4px;">{{index+1}}.{{item.sectionName}}</span>
                                        <button style="background-color: rgb(45, 183, 245);border:none">
                                            <a-icon type="cloud-download"/>
                                            下载
                                        </button>
                                    </div>
                                </h3>
                                <dl>
                                    <dt v-for="(item1,index1) in item.subSections" :key="index1">
                                        <div>
                                            {{index+1}}-{{index1+1}}
                                            <span style="display: inline-block;width: 8px"></span>
                                            {{item1.sectionName}}
                                            <a-icon type="right-circle" style="float: right;line-height: 30px"/>
                                        </div>
                                    </dt>
                                </dl>
                            </div>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="评论" style="padding: 30px;">
                        <div>
                            <div>
                                <div>评论</div>
                                <div>
                                       <span>
                                           <a-rate v-model="value" :tooltips="desc"/>
                                           <span class="ant-rate-text">{{ desc[value - 1] }}</span>
                                       </span>
                                </div>
                            </div>
                            <!--                               评论框组件-->
                            <Comment></Comment>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入
    import Comment from "./Comment";
    import {message} from 'ant-design-vue';

    const key = 'updatable';
    import {kechengxiangqing} from "../../../api/api"

    export default {
        name: "CacheMid",
        props: {
            courseId: [Number, String],
        },
        components: {
            Comment
        },
        data() {
            return {
                value: 3,
                desc: ['差', '一般', '中等', '好', '非常好'],
                data: {},
            }
        },
        // tab切换 和
        methods: {
            callback(key) {
                console.log(key);
            },
            openMessage() {
                message.loading({content: 'Loading...', key});
                setTimeout(() => {
                    message.success({content: '收藏成功', key, duration: 2});
                }, 1000);
            },
        },
        created() {
            console.log(this.courseId)
            kechengxiangqing(this.courseId).then(
                res => {
                    console.log(res);
                    this.data = res.data
                })
        }
    }
</script>

<style scoped lang="less">

    .ant-btn-primary {
        color: white;
        background-color: white;
        border: 1px solid #dbcfcf;
    }

    .zhongbub3 span {
        color: #8c8c8c;
    }

    .buttonGroup {
        padding: 20px;
    }

    /deep/ .ant-btn > span {
        color: black;
    }

    .pinglunleft {
        border: 1px solid #D9D9D9;
        color: #D9D9D9;
        width: 32px;
        height: 32px;
        line-height: 32px;
        float: left;
        margin-left: -32px;
        cursor: not-allowed;
        padding: 5px 5px;
        text-align: center;
        border-radius: 2px;

    }

    .pinglunright {
        border: 1px solid #D9D9D9;
        color: #D9D9D9;
        width: 32px;
        height: 32px;
        line-height: 32px;
        float: left;
        margin-left: 6px;
        cursor: not-allowed;
        padding: 5px 5px;
        text-align: center;
        border-radius: 2px;

    }

    .pinglunzhong {
        color: #00CF8C;
        width: 32px;
        height: 32px;
        line-height: 32px;
        float: left;
        padding: 5px 5px;
        text-align: center;
        margin-left: 6px;
        border: 1px solid #00CF8C;
        border-radius: 2px;

    }

    h3 span {
        font-size: 22px;
    }

    h3 button {
        float: right;
        color: white;
        height: 30px;
        line-height: 27px;
        width: 80px;
        text-align: center;
        display: block;
        font-size: 14px;
    }

    dl dt {
        height: 50px;
        line-height: 30px;
        padding: 10px 20px;
        background: #f2f2f2;
        margin: 10px 0;
    }

    .container {
        width: 80%;
        margin-left: 10%;
        margin-top: 2%;
        margin-bottom: 3%;
        background-color: white;
    }

    .zhongbu {
        width: 100%;
        /*  border: 1px solid red; */
        background-color: #f4f4f4;
        overflow: hidden;
    }

    .zhongbua {
        width: 80%;
        height: 70px;
        /*   border: 1px solid red; */
        margin: 0% 10%;
    }

    .zhongbua span svg {
        width: 1.5%;
        height: 20%;
        margin-top: 2%;
        margin-left: 0%;
    }

    .zhongbua span {
        color: #8c8c8c;
    }

    .zhongbua span:hover {
        color: #00cf8c;
        cursor: pointer;
    }

    .zhongbub {
        width: 80%;
        height: 270px;
        margin-left: 10%;
        margin-top: -1%;
        background-color: white;
    }

    .zhongbub img {
        margin-top: 2%;
        margin-left: 2%;
        width: 28%;
        height: 80%;
        float: left;
    }

    .zhongbub2 {
        overflow: hidden;
    }

    .zhongbub2 .span1 {
        display: inline-block;
        font-size: 24px;
        margin-top: 2%;
        margin-left: 4%;
    }

    .zhongbub2 .span2 {
        display: inline-block;
        color: #999999;
        margin-top: 2%;
        margin-left: 4%;
    }

    .zhongbub2 .span3 {
        display: inline-block;
        font-size: 24px;
        color: black;
        margin-top: 2%;
        margin-left: 4%;
    }

    .zhongbub2 .span4 {
        color: #ff4f23;
        text-decoration: line-through;
        margin-left: 1%;
    }

    .zhongbub2 .span5 {
        display: inline-block;
        width: 65px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #ffda9e;
        color: #fa8c16;
        background-color: #fff7e6;
        font-size: 13px;
        text-align: center;
        margin-top: 3%;
        margin-left: 4%;
    }

    .zhongbub2 .b1 {
        width: 150px;
        height: 45px;
        color: white;
        background-color: #00cf8c;
        border: 1px solid #00cf8c;
        border-radius: 2px 2px 2px 2px;
        font-size: 20px;
        margin-top: 1.1%;
        margin-left: 23%;
    }


    .zhongbub2 svg {
        width: 20px;
        height: 20px;
    }

    .zhongbub3 {
        float: left;
        /*border: solid 1px #999999;*/
        width: 106px;
        height: 30px;
        margin-top: -18%;
        margin-left: 88%;
        color: #999994;
        line-height: 30px;
        cursor: pointer;
    }

    .zhongbub3 img {
        width: 20%;
        height: 60%;
        margin-top: 6%;
        margin-left: 22%;
    }

    .zhongbuc1 ul li {
        list-style: none;
        float: left;
        height: 40px;
        line-height: 40px;
        width: 100px;
        text-align: center;
        color: #595959;
        margin-right: 2px;
    }

    .zhongbuc1 ul li:hover {
        color: #00cf8c;
        cursor: pointer;
    }
</style>